<template>
	<view class="voice-container">
		<!-- 游戏状态：说明 -->
		<view v-if="gameState === 'instruction'" class="instruction-section">
			<view class="title">语音记忆测试</view>
			<view class="instruction-content">
				<view class="instruction-item">
					<text class="icon">🔊</text>
					<text class="text">仔细听音频序列的播放顺序</text>
				</view>
				<view class="instruction-item">
					<text class="icon">🎵</text>
					<text class="text">每个音符都有不同的音调</text>
				</view>
				<view class="instruction-item">
					<text class="icon">🎯</text>
					<text class="text">按相同顺序点击音符重复序列</text>
				</view>
				<view class="instruction-item">
					<text class="icon">📈</text>
					<text class="text">每轮成功后序列长度会增加</text>
				</view>
			</view>
			
			<view class="difficulty-selector">
				<view class="difficulty-title">选择难度</view>
				<view class="difficulty-options">
					<view 
						v-for="level in difficultyLevels" 
						:key="level.value"
						:class="['difficulty-option', { active: selectedDifficulty === level.value }]"
						@click="selectDifficulty(level.value)"
					>
						<view class="difficulty-name">{{ level.name }}</view>
						<view class="difficulty-desc">{{ level.desc }}</view>
					</view>
				</view>
			</view>
			
			<button class="start-btn" @click="startGame">开始测试</button>
		</view>
		
		<!-- 游戏状态：准备 -->
		<view v-if="gameState === 'ready'" class="ready-section">
			<view class="ready-title">准备开始</view>
			<view class="ready-info">
				<view class="level-info">第 {{ currentLevel }} 轮</view>
				<view class="sequence-info">需要记忆 {{ currentSequence.length }} 个音符</view>
			</view>
			<view class="countdown">{{ countdown }}</view>
		</view>
		
		<!-- 游戏状态：播放序列 -->
		<view v-if="gameState === 'playing'" class="playing-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 轮</view>
				<view class="progress-info">
					{{ currentPlayIndex + 1 }} / {{ currentSequence.length }}
				</view>
			</view>
			
			<view class="instruction-text">请仔细听音频序列</view>
			
			<view class="sound-grid">
				<view 
					v-for="(sound, index) in soundButtons" 
					:key="index"
					:class="['sound-btn', {
						active: currentPlayIndex >= 0 && currentSequence[currentPlayIndex] === index,
						playing: isPlaying && currentSequence[currentPlayIndex] === index
					}]"
					:style="{ backgroundColor: sound.color }"
				>
					<view class="sound-icon">{{ sound.icon }}</view>
					<view class="sound-name">{{ sound.name }}</view>
				</view>
			</view>
			
			<view class="play-status">
				<view class="status-text">{{ playStatusText }}</view>
			</view>
		</view>
		
		<!-- 游戏状态：用户输入 -->
		<view v-if="gameState === 'input'" class="input-section">
			<view class="game-header">
				<view class="level-indicator">第 {{ currentLevel }} 轮</view>
				<view class="input-progress">
					{{ userSequence.length }} / {{ currentSequence.length }}
				</view>
			</view>
			
			<view class="instruction-text">请按相同顺序点击音符</view>
			
			<view class="sound-grid">
				<view 
					v-for="(sound, index) in soundButtons" 
					:key="index"
					:class="['sound-btn', 'interactive', {
						selected: userSequence.includes(index),
						correct: userSequence.includes(index) && isCorrectSoFar(index),
						wrong: userSequence.includes(index) && !isCorrectSoFar(index)
					}]"
					:style="{ backgroundColor: sound.color }"
					@click="selectSound(index)"
				>
					<view class="sound-icon">{{ sound.icon }}</view>
					<view class="sound-name">{{ sound.name }}</view>
				</view>
			</view>
			
			<view class="input-actions">
				<button class="action-btn secondary" @click="clearInput" :disabled="userSequence.length === 0">
					清空
				</button>
				<button class="action-btn secondary" @click="replaySequence">
					重听
				</button>
				<button class="action-btn primary" @click="submitInput" :disabled="userSequence.length !== currentSequence.length">
					提交
				</button>
			</view>
		</view>
		
		<!-- 游戏状态：结果 -->
		<view v-if="gameState === 'result'" class="result-section">
			<view class="result-header">
				<view class="result-icon">{{ isCorrect ? '🎉' : '😔' }}</view>
				<view class="result-title">{{ isCorrect ? '答对了！' : '答错了！' }}</view>
			</view>
			
			<view class="sequence-comparison">
				<view class="comparison-row">
					<view class="comparison-label">正确序列：</view>
					<view class="sequence-display">
						<view 
							v-for="(soundIndex, index) in currentSequence" 
							:key="index"
							class="sequence-item correct"
							:style="{ backgroundColor: soundButtons[soundIndex].color }"
						>
							{{ soundButtons[soundIndex].icon }}
						</view>
					</view>
				</view>
				<view class="comparison-row">
					<view class="comparison-label">你的序列：</view>
					<view class="sequence-display">
						<view 
							v-for="(soundIndex, index) in userSequence" 
							:key="index"
							:class="['sequence-item', {
								correct: currentSequence[index] === soundIndex,
								wrong: currentSequence[index] !== soundIndex
							}]"
							:style="{ backgroundColor: soundButtons[soundIndex].color }"
						>
							{{ soundButtons[soundIndex].icon }}
						</view>
						<view v-if="userSequence.length === 0" class="empty-sequence">未输入</view>
					</view>
				</view>
			</view>
			
			<view class="accuracy-display" v-if="!isCorrect">
				<view class="accuracy-title">准确率分析</view>
				<view class="accuracy-rate">准确率：{{ Math.round(accuracy * 100) }}%</view>
			</view>
			
			<view class="result-stats">
				<view class="stat-item">
					<view class="stat-value">{{ currentLevel }}</view>
					<view class="stat-label">当前轮次</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ score }}</view>
					<view class="stat-label">当前得分</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ Math.round(reactionTime) }}ms</view>
					<view class="stat-label">反应时间</view>
				</view>
			</view>
			
			<view class="result-actions">
				<button v-if="isCorrect" class="action-btn primary" @click="nextLevel">
					下一轮
				</button>
				<button v-else class="action-btn secondary" @click="retryLevel">
					重试
				</button>
				<button class="action-btn secondary" @click="endGame">
					结束游戏
				</button>
			</view>
		</view>
		
		<!-- 游戏状态：最终结果 -->
		<view v-if="gameState === 'final'" class="final-section">
			<view class="final-header">
				<view class="final-icon">🏆</view>
				<view class="final-title">测试完成</view>
				<view class="final-subtitle">{{ getFinalMessage() }}</view>
			</view>
			
			<view class="final-stats">
				<view class="final-stat-item">
					<view class="final-stat-value">{{ maxLevel }}</view>
					<view class="final-stat-label">最高轮次</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ finalScore }}</view>
					<view class="final-stat-label">最终得分</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ Math.round(averageReactionTime) }}ms</view>
					<view class="final-stat-label">平均反应时间</view>
				</view>
				<view class="final-stat-item">
					<view class="final-stat-value">{{ getGrade() }}</view>
					<view class="final-stat-label">评级</view>
				</view>
			</view>
			
			<view class="performance-analysis">
				<view class="analysis-title">表现分析</view>
				<view class="analysis-content">
					<view class="analysis-item">
						<text class="analysis-label">听觉记忆：</text>
						<text class="analysis-value">{{ getMemoryRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">反应速度：</text>
						<text class="analysis-value">{{ getSpeedRating() }}</text>
					</view>
					<view class="analysis-item">
						<text class="analysis-label">准确程度：</text>
						<text class="analysis-value">{{ getAccuracyRating() }}</text>
					</view>
				</view>
			</view>
			
			<view class="final-actions">
				<button class="action-btn primary" @click="restartGame">再次测试</button>
				<button class="action-btn secondary" @click="goHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 游戏状态
const gameState = ref('instruction') // instruction, ready, playing, input, result, final
const selectedDifficulty = ref('normal')
const currentLevel = ref(1)
const maxLevel = ref(1)
const score = ref(0)
const finalScore = ref(0)
const isCorrect = ref(false)
const countdown = ref(3)
const accuracy = ref(0)

// 音频序列相关
const currentSequence = ref([])
const userSequence = ref([])
const currentPlayIndex = ref(-1)
const isPlaying = ref(false)

// 时间相关
const reactionTime = ref(0)
const averageReactionTime = ref(0)
const reactionTimes = ref([])
const inputStartTime = ref(0)

// 定时器
let countdownTimer = null
let playTimer = null

// 音频按钮配置
const soundButtons = ref([
	{ name: 'Do', icon: '🎵', color: '#FF6B6B', frequency: 261.63 },
	{ name: 'Re', icon: '🎶', color: '#4ECDC4', frequency: 293.66 },
	{ name: 'Mi', icon: '🎼', color: '#45B7D1', frequency: 329.63 },
	{ name: 'Fa', icon: '🎹', color: '#96CEB4', frequency: 349.23 },
	{ name: 'So', icon: '🎺', color: '#FFEAA7', frequency: 392.00 },
	{ name: 'La', icon: '🎸', color: '#DDA0DD', frequency: 440.00 },
	{ name: 'Ti', icon: '🥁', color: '#98D8C8', frequency: 493.88 },
	{ name: 'Do2', icon: '🎤', color: '#F7DC6F', frequency: 523.25 }
])

// 难度配置
const difficultyLevels = ref([
	{
		value: 'easy',
		name: '简单',
		desc: '3-5个音符，播放速度较慢',
		startLength: 3,
		maxLength: 5,
		playSpeed: 800, // 毫秒
		increment: 1
	},
	{
		value: 'normal',
		name: '普通',
		desc: '4-7个音符，播放速度适中',
		startLength: 4,
		maxLength: 7,
		playSpeed: 600, // 毫秒
		increment: 1
	},
	{
		value: 'hard',
		name: '困难',
		desc: '5-10个音符，播放速度较快',
		startLength: 5,
		maxLength: 10,
		playSpeed: 400, // 毫秒
		increment: 1
	}
])

// 当前难度配置
const currentDifficulty = computed(() => {
	return difficultyLevels.value.find(d => d.value === selectedDifficulty.value)
})

// 播放状态文本
const playStatusText = computed(() => {
	if (currentPlayIndex.value === -1) return '准备播放...'
	if (currentPlayIndex.value >= currentSequence.value.length) return '播放完成'
	return `正在播放第 ${currentPlayIndex.value + 1} 个音符`
})

// 生成随机音频序列
const generateSequence = () => {
	const difficulty = currentDifficulty.value
	const baseLength = difficulty.startLength
	const extraLength = Math.min((currentLevel.value - 1) * difficulty.increment, difficulty.maxLength - baseLength)
	const sequenceLength = baseLength + extraLength
	
	const sequence = []
	for (let i = 0; i < sequenceLength; i++) {
		sequence.push(Math.floor(Math.random() * soundButtons.value.length))
	}
	return sequence
}

// 播放音频（模拟）
const playSound = (soundIndex) => {
	// 在实际应用中，这里应该播放真实的音频
	// 这里使用Web Audio API模拟音频播放
	try {
		const audioContext = new (window.AudioContext || window.webkitAudioContext)()
		const oscillator = audioContext.createOscillator()
		const gainNode = audioContext.createGain()
		
		oscillator.connect(gainNode)
		gainNode.connect(audioContext.destination)
		
		oscillator.frequency.setValueAtTime(soundButtons.value[soundIndex].frequency, audioContext.currentTime)
		oscillator.type = 'sine'
		
		gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)
		gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3)
		
		oscillator.start(audioContext.currentTime)
		oscillator.stop(audioContext.currentTime + 0.3)
	} catch (e) {
		console.log('音频播放失败，使用静音模式')
	}
}

// 选择难度
const selectDifficulty = (difficulty) => {
	selectedDifficulty.value = difficulty
}

// 开始游戏
const startGame = () => {
	resetGame()
	startLevel()
}

// 重置游戏
const resetGame = () => {
	currentLevel.value = 1
	maxLevel.value = 1
	score.value = 0
	reactionTimes.value = []
	clearAllTimers()
}

// 开始关卡
const startLevel = () => {
	gameState.value = 'ready'
	currentSequence.value = generateSequence()
	userSequence.value = []
	currentPlayIndex.value = -1
	isPlaying.value = false
	
	// 倒计时
	countdown.value = 3
	countdownTimer = setInterval(() => {
		countdown.value--
		if (countdown.value <= 0) {
			clearInterval(countdownTimer)
			playSequence()
		}
	}, 1000)
}

// 播放序列
const playSequence = () => {
	gameState.value = 'playing'
	currentPlayIndex.value = 0
	isPlaying.value = true
	
	const playNext = () => {
		if (currentPlayIndex.value < currentSequence.value.length) {
			const soundIndex = currentSequence.value[currentPlayIndex.value]
			playSound(soundIndex)
			
			playTimer = setTimeout(() => {
				currentPlayIndex.value++
				if (currentPlayIndex.value < currentSequence.value.length) {
					playNext()
				} else {
					isPlaying.value = false
					setTimeout(() => {
						startInput()
					}, 1000)
				}
			}, currentDifficulty.value.playSpeed)
		}
	}
	
	playNext()
}

// 开始输入阶段
const startInput = () => {
	gameState.value = 'input'
	inputStartTime.value = Date.now()
}

// 选择音符
const selectSound = (soundIndex) => {
	if (userSequence.value.length < currentSequence.value.length) {
		userSequence.value.push(soundIndex)
		playSound(soundIndex)
		
		// 如果序列完成，自动提交
		if (userSequence.value.length === currentSequence.value.length) {
			setTimeout(() => {
				submitInput()
			}, 500)
		}
	}
}

// 检查当前输入是否正确
const isCorrectSoFar = (soundIndex) => {
	const currentIndex = userSequence.value.indexOf(soundIndex)
	if (currentIndex === -1) return true
	return currentSequence.value[currentIndex] === soundIndex
}

// 清空输入
const clearInput = () => {
	userSequence.value = []
}

// 重新播放序列
const replaySequence = () => {
	playSequence()
}

// 提交输入
const submitInput = () => {
	const endTime = Date.now()
	reactionTime.value = endTime - inputStartTime.value
	reactionTimes.value.push(reactionTime.value)
	
	// 检查答案
	isCorrect.value = JSON.stringify(userSequence.value) === JSON.stringify(currentSequence.value)
	
	// 计算准确率
	let correctCount = 0
	for (let i = 0; i < Math.max(userSequence.value.length, currentSequence.value.length); i++) {
		if (userSequence.value[i] === currentSequence.value[i]) {
			correctCount++
		}
	}
	accuracy.value = correctCount / currentSequence.value.length
	
	// 计算得分
	if (isCorrect.value) {
		const baseScore = currentLevel.value * 100
		const lengthBonus = currentSequence.value.length * 20
		const speedBonus = Math.max(0, 15000 - reactionTime.value) / 100
		const difficultyMultiplier = selectedDifficulty.value === 'easy' ? 1 : selectedDifficulty.value === 'normal' ? 1.5 : 2
		score.value += Math.round((baseScore + lengthBonus + speedBonus) * difficultyMultiplier)
	} else {
		// 部分分数基于准确率
		const partialScore = Math.round(accuracy.value * currentLevel.value * 60)
		score.value += partialScore
	}
	
	gameState.value = 'result'
}

// 下一关
const nextLevel = () => {
	currentLevel.value++
	maxLevel.value = Math.max(maxLevel.value, currentLevel.value)
	startLevel()
}

// 重试关卡
const retryLevel = () => {
	startLevel()
}

// 结束游戏
const endGame = () => {
	finalScore.value = score.value
	averageReactionTime.value = reactionTimes.value.reduce((a, b) => a + b, 0) / reactionTimes.value.length || 0
	gameState.value = 'final'
	saveGameData()
}

// 重新开始游戏
const restartGame = () => {
	gameState.value = 'instruction'
	resetGame()
}

// 返回首页
const goHome = () => {
	uni.navigateBack()
}

// 获取最终消息
const getFinalMessage = () => {
	if (maxLevel.value >= 12) return '听觉记忆大师！'
	if (maxLevel.value >= 8) return '听力超群！'
	if (maxLevel.value >= 6) return '表现不错！'
	if (maxLevel.value >= 4) return '还需努力！'
	return '继续加油！'
}

// 获取评级
const getGrade = () => {
	if (maxLevel.value >= 12) return 'S+'
	if (maxLevel.value >= 10) return 'S'
	if (maxLevel.value >= 8) return 'A'
	if (maxLevel.value >= 6) return 'B'
	if (maxLevel.value >= 4) return 'C'
	return 'D'
}

// 获取记忆能力评级
const getMemoryRating = () => {
	if (maxLevel.value >= 12) return '超凡'
	if (maxLevel.value >= 9) return '优秀'
	if (maxLevel.value >= 6) return '良好'
	if (maxLevel.value >= 4) return '一般'
	return '需要提高'
}

// 获取反应速度评级
const getSpeedRating = () => {
	if (averageReactionTime.value < 5000) return '很快'
	if (averageReactionTime.value < 8000) return '较快'
	if (averageReactionTime.value < 12000) return '一般'
	return '较慢'
}

// 获取准确程度评级
const getAccuracyRating = () => {
	const totalAccuracy = reactionTimes.value.length > 0 ? (score.value / (maxLevel.value * 300)) : 0
	if (totalAccuracy >= 0.9) return '极高'
	if (totalAccuracy >= 0.7) return '很好'
	if (totalAccuracy >= 0.5) return '良好'
	if (totalAccuracy >= 0.3) return '一般'
	return '需要提高'
}

// 保存游戏数据
const saveGameData = () => {
	const gameData = {
		date: new Date().toISOString(),
		difficulty: selectedDifficulty.value,
		maxLevel: maxLevel.value,
		finalScore: finalScore.value,
		averageReactionTime: averageReactionTime.value,
		grade: getGrade()
	}
	
	// 获取历史数据
	const historyKey = 'voice_memory_history'
	let history = []
	try {
		const stored = uni.getStorageSync(historyKey)
		if (stored) {
			history = JSON.parse(stored)
		}
	} catch (e) {
		console.error('读取历史数据失败:', e)
	}
	
	// 添加新记录
	history.unshift(gameData)
	
	// 只保留最近50条记录
	if (history.length > 50) {
		history = history.slice(0, 50)
	}
	
	// 保存数据
	try {
		uni.setStorageSync(historyKey, JSON.stringify(history))
	} catch (e) {
		console.error('保存历史数据失败:', e)
	}
}

// 清除所有定时器
const clearAllTimers = () => {
	if (countdownTimer) {
		clearInterval(countdownTimer)
		countdownTimer = null
	}
	if (playTimer) {
		clearTimeout(playTimer)
		playTimer = null
	}
}

// 组件卸载时清理
onUnmounted(() => {
	clearAllTimers()
})
</script>

<style lang="scss" scoped>
.voice-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 30rpx;
	color: white;
}

// 说明页面样式
.instruction-section {
	text-align: center;
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
		color: #fff;
	}
	
	.instruction-content {
		margin-bottom: 60rpx;
		
		.instruction-item {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.icon {
				font-size: 36rpx;
				margin-right: 20rpx;
			}
			
			.text {
				font-size: 28rpx;
				flex: 1;
				text-align: left;
			}
		}
	}
	
	.difficulty-selector {
		margin-bottom: 60rpx;
		
		.difficulty-title {
			font-size: 32rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
		}
		
		.difficulty-options {
			display: flex;
			gap: 20rpx;
			
			.difficulty-option {
				flex: 1;
				padding: 30rpx 20rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 15rpx;
				border: 2rpx solid transparent;
				transition: all 0.3s;
				
				&.active {
					background: rgba(255, 255, 255, 0.2);
					border-color: #fff;
					transform: scale(1.05);
				}
				
				.difficulty-name {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.difficulty-desc {
					font-size: 22rpx;
					opacity: 0.8;
				}
			}
		}
	}
	
	.start-btn {
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(45deg, #ff6b6b, #ee5a24);
		color: white;
		border: none;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
		transition: all 0.3s;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
		}
	}
}

// 准备页面样式
.ready-section {
	text-align: center;
	padding-top: 200rpx;
	
	.ready-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 60rpx;
	}
	
	.ready-info {
		margin-bottom: 80rpx;
		
		.level-info {
			font-size: 36rpx;
			margin-bottom: 20rpx;
			color: #ffd700;
		}
		
		.sequence-info {
			font-size: 28rpx;
			opacity: 0.8;
		}
	}
	
	.countdown {
		font-size: 120rpx;
		font-weight: bold;
		color: #ffd700;
		animation: pulse 1s infinite;
	}
}

@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

// 播放和输入页面样式
.playing-section, .input-section {
	.game-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		
		.level-indicator {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffd700;
		}
		
		.progress-info, .input-progress {
			font-size: 28rpx;
			color: #ffd700;
		}
	}
	
	.instruction-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 40rpx;
		opacity: 0.9;
	}
	
	.sound-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
		
		.sound-btn {
			aspect-ratio: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.2);
			transition: all 0.3s;
			border: 3rpx solid transparent;
			position: relative;
			overflow: hidden;
			
			&.active {
				border-color: #ffd700;
				box-shadow: 0 0 20rpx rgba(255, 215, 0, 0.6);
				transform: scale(1.1);
			}
			
			&.playing {
				animation: soundPulse 0.6s ease-in-out;
			}
			
			&.interactive {
				cursor: pointer;
				
				&:active {
					transform: scale(0.95);
				}
				
				&.selected {
					border-color: #fff;
					box-shadow: 0 0 15rpx rgba(255, 255, 255, 0.5);
				}
				
				&.correct {
					border-color: #4caf50;
					box-shadow: 0 0 15rpx rgba(76, 175, 80, 0.6);
				}
				
				&.wrong {
					border-color: #f44336;
					box-shadow: 0 0 15rpx rgba(244, 67, 54, 0.6);
				}
			}
			
			.sound-icon {
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}
			
			.sound-name {
				font-size: 24rpx;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
		}
	}
	
	.play-status {
		text-align: center;
		
		.status-text {
			font-size: 28rpx;
			color: #ffd700;
			font-weight: bold;
		}
	}
	
	.input-actions {
		display: flex;
		justify-content: center;
		gap: 20rpx;
	}
}

@keyframes soundPulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); box-shadow: 0 0 30rpx rgba(255, 215, 0, 0.8); }
	100% { transform: scale(1); }
}

// 结果页面样式
.result-section {
	text-align: center;
	
	.result-header {
		margin-bottom: 40rpx;
		
		.result-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
		}
		
		.result-title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	
	.sequence-comparison {
		margin-bottom: 40rpx;
		
		.comparison-row {
			margin-bottom: 30rpx;
			
			.comparison-label {
				font-size: 24rpx;
				margin-bottom: 15rpx;
				opacity: 0.8;
			}
			
			.sequence-display {
				display: flex;
				justify-content: center;
				gap: 10rpx;
				flex-wrap: wrap;
				
				.sequence-item {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #fff;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					border: 2rpx solid transparent;
					
					&.correct {
						border-color: #4caf50;
						box-shadow: 0 0 10rpx rgba(76, 175, 80, 0.4);
					}
					
					&.wrong {
						border-color: #f44336;
						box-shadow: 0 0 10rpx rgba(244, 67, 54, 0.4);
					}
				}
				
				.empty-sequence {
					font-size: 28rpx;
					opacity: 0.6;
					font-style: italic;
				}
			}
		}
	}
	
	.accuracy-display {
		margin-bottom: 40rpx;
		
		.accuracy-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 15rpx;
		}
		
		.accuracy-rate {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffd700;
		}
	}
	
	.result-stats {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
		
		.stat-item {
			text-align: center;
			
			.stat-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.stat-label {
				font-size: 22rpx;
				opacity: 0.8;
			}
		}
	}
	
	.result-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 最终结果页面样式
.final-section {
	text-align: center;
	
	.final-header {
		margin-bottom: 60rpx;
		
		.final-icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
		}
		
		.final-title {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		
		.final-subtitle {
			font-size: 32rpx;
			color: #ffd700;
		}
	}
	
	.final-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		margin-bottom: 60rpx;
		
		.final-stat-item {
			padding: 30rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			
			.final-stat-value {
				font-size: 48rpx;
				font-weight: bold;
				color: #ffd700;
				margin-bottom: 10rpx;
			}
			
			.final-stat-label {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}
	}
	
	.performance-analysis {
		margin-bottom: 60rpx;
		
		.analysis-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
		
		.analysis-content {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 15rpx;
			padding: 30rpx;
			
			.analysis-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.analysis-label {
					font-size: 28rpx;
				}
				
				.analysis-value {
					font-size: 28rpx;
					font-weight: bold;
					color: #ffd700;
				}
			}
		}
	}
	
	.final-actions {
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}

// 通用按钮样式
.action-btn {
	padding: 20rpx 40rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	font-weight: bold;
	border: none;
	transition: all 0.3s;
	min-width: 120rpx;
	
	&.primary {
		background: linear-gradient(45deg, #4caf50, #45a049);
		color: white;
		box-shadow: 0 4rpx 15rpx rgba(76, 175, 80, 0.4);
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
		}
	}
	
	&.secondary {
		background: rgba(255, 255, 255, 0.2);
		color: white;
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		
		&:active {
			background: rgba(255, 255, 255, 0.3);
		}
		
		&:disabled {
			opacity: 0.5;
			pointer-events: none;
		}
	}
}
</style>
